<script lang='ts' setup>
import { reactive, ref } from 'vue'
import { Plus, } from '@element-plus/icons-vue' 
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const uploadNode = ref<HTMLElement>()
const state = reactive({
    name: '',
    tableData: [
        { id: 222, name: '阿加', },
        { id: 42, name: '阿加', },
        { id: 522, name: '阿加', },
        { id: 2642, name: '阿加', },
        { id: 322, name: '阿加', },
    ]
}) 
const props = withDefaults(defineProps<{ 
    modelValue: boolean, 
}>(), {
    modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const ruleForm = reactive({ 
	engName: '',
	name: '', 
    brand: '', 
    type: 1
})

const uploadImg = () => {
    uploadNode!.value!.click()
}

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }], 
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}

/**
 * 分页函数
 */
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="新增品牌" center @close="closeDialog" style="width: 1000px;">
            <section>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			     status-icon style="max-width: 400px;">
                    <el-form-item label="品牌中文名称" prop="name">
                        <el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入品牌中文名称" />
                    </el-form-item>
                    <el-form-item label="品牌英文名" prop="engName">
                        <el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入品牌英文名" />
                    </el-form-item>

                    <el-form-item label="品牌logo" >
                        <section class="selector-goods-img" @click="uploadImg">
                            <el-icon size="30" color="#999"><Plus /></el-icon>
                        </section>
                        <input type="file" ref="uploadNode" style="width: 0px;height: 0px; opacity: 0;" />
                    </el-form-item>

                    <el-form-item label="品牌商标" >
                        <section class="selector-goods-img" @click="uploadImg">
                            <el-icon size="30" color="#999"><Plus /></el-icon>
                        </section> 
                    </el-form-item>

                    
                    <el-form-item label="品牌方">
                        <el-input v-model="ruleForm.brand" class="form-ele-size" placeholder="请输入品牌方" />
                    </el-form-item>

                    <el-form-item label="品牌类型">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="1">国产</el-radio>
                            <el-radio :label="2">进口</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                 
                <el-row justify="center" class="mt20">
                    <el-button >取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </el-row>
            </section> 
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.selector-goods-img{
    cursor: pointer;
    width: 90px;
    height: 90px;
    border: 1px solid #ededed;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>